﻿{% extends "base/base.html" %}
{% load staticfiles %}

{% block customizedCSS %}
<!-- this page specific styles -->
    <link rel="stylesheet" href="/static/css/compiled/signin.css" type="text/css" media="screen" />
    <style type="text/css">
        #error_div{color:red}
        #error_div ul{list-style: circle;}
        #error_div ul li{text-align: left;}
    </style>
{% endblock %}
{# sign in informaiton  #}}
 {% block body %}
<div class="row-fluid login-wrapper">
        <a href="index.html">
            <img class="logo" src="/static/img/logo-white.png" />
        </a>

        <div class="span4 box">
        <form method="post">
            {% csrf_token %}
            <div class="content-wrap" id="form">
                <h6>登录系统</h6>
                <input class="span12" name="email" value="{{form.email.value}}" type="text" placeholder="E-mail address" />
                <input class="span12" name="password" type="password" placeholder="Your password" />
                <a href="#" class="forgot">Forgot password?</a>
                <div class="remember">
                    <input id="remember-me" type="checkbox" name="remember"/>
                    <label for="remember-me">Remember me</label>
                </div>
                <div id="error_div">
                        {% if error%}
                        <div class="alert alert-danger" role="alert">
                            {%for field in form%}
                                {{field.errors}}
                            {%endfor%}
                        </div>
                        {%endif%}
                </div>
                <input type="submit" class="btn-glow primary login" href="/signin/" value="登录" />
            </div>
        </form>
        </div>

        <div class="span4 no-account">
            <p>Don't have an account?</p>
            <a href="../signup">Sign up</a>
        </div>
    </div>
{% endblock %}

{# custmized javescript #}}
{% block customizedJS %}
<script type="text/javascript">
        $(function () {
            //设置背景-
            $("html").css("background-image", "url('/static/img/bgs/9.jpg')");

            //当输入框获取焦点时，清空错误提示容器中的错误信息-
            $("#form input").focus(function(){
                $("#error_div").html("")
            });
        });
    </script>
{% endblock %}
